<template>
  <div class="app-container">
    <div class="head-dashboard">
      <div>
        <p>201</p>
        <p>派单酬金</p>
      </div>
      <div>
        <p>201</p>
        <p>企业内部</p>
      </div>
      <div>
        <p>201</p>
        <p>电力承包</p>
      </div>
      <div>
        <p>201</p>
        <p>临时雇佣</p>
      </div>
    </div>
    <div class="chart-view">
      <div class="head">
        <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
        <div>派单金额分布状况</div>
        <el-radio-group v-model="radio1">
          <el-radio-button label="天" />
          <el-radio-button label="周" />
          <el-radio-button label="月" />
        </el-radio-group>
      </div>
      <line-marker width="100%" height="320px" style="margin-top:10px;" />
    </div>
    <div class="chart-view">
      <div class="chart-view-title">各类型总金额</div>
      <bar-chart id="jdsjs" width="100%" height="320px" />
    </div>
    <div class="chart-view">
      <div class="chart-view-title">违约订单分析</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="时间" width="180" />
        <el-table-column prop="name" label="违约金额（元）" width="180" />
        <el-table-column prop="address" label="操作" />
      </el-table>
    </div>
  </div>
</template>
<script>
import LineMarker from '@/components/Charts/LineMarker'
import BarChart from '@/components/Charts/BarChart'
export default {
  components: {
    LineMarker,
    BarChart
  },
  data() {
    return {
      value1: '',
      radio1: '',
      tableData: []
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #f4f6f9;
}
.chart-view {
  border-radius: 10px;
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
  .head {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.chart-view-title{
    text-align: center;
    margin-bottom: 20px;
}
.head-dashboard {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 21px 33px -31px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  background-color: #ffffff;
  padding: 20px;
  & > div {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      padding: 0;
      margin: 0;
    }
    p:nth-child(1) {
      font-size: 30px;
      font-weight: 500;
      color: rgba(48, 49, 51, 1);
      line-height: 42px;
    }
    p:nth-child(2) {
      font-size: 14px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
    }
  }
  & > div:after {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    position: absolute;
    background-color: #cccccc;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
  }
  & > div:last-child:after {
    display: none;
  }
}
</style>
